<template>
  <div class="demo-split">
    <Split v-model="split3">
      <div slot="left" class="demo-split-pane no-padding">
        <Split v-model="split4" mode="vertical">
          <div slot="top" class="demo-split-pane">
            <linec dyid="line1" title="平均值控制值图" :datas="datas1" />
          </div>
          <div slot="bottom" class="demo-split-pane">
            <linec dyid="line2" title="标准差控制值图" :datas="datas2" />
          </div>
        </Split>
      </div>

      <div slot="right" class="demo-split-pane">
        <div style="float:right">
          <upload />
        </div>
        <linem :datas="datas3" title="质量分布图" />
        <Divider />
        <cards :datas="datas4" />
      </div>
    </Split>
  </div>
</template>

<script>
import linec from "./line/line.vue";
import linem from "./line/smooth.vue";
import cards from "./line/cards.vue";
import upload from "./upload.vue";
export default {
  data() {
    return {
      datas1: {},
      datas2: {},
      datas3: [],
      datas4: {},
      split3: 0.5,
      split4: 0.5,
    };
  },
  mounted() {
    this.axios
      .get("/api/constrol")
      .then((r) => {
        this.datas1 = r.data.avgcon;
        this.datas2 = r.data.stdcon;
        this.datas3 = r.data.dis;
        this.datas4 = r.data.var;
      })
      .catch((e) => {
        this.$Message.error("e" + e);
      });
  },
  components: {
    linec,
    linem,
    cards,
    upload,
  },
};
</script>

<style>
</style>